import React, {useState} from 'react';
import { forwardRef } from 'react';
import './index.scss';

export interface MaterialTab {
  id: string;
  text: string;
  isActive?: boolean;
  onClick?: () => void;
}

export interface MaterialStat {
  label: string;
  value: string | number;
  unit?: string;
  showGradient?: boolean;
}

export interface MaterialRecord {
  id: string;
  name: string;
  quantity: string | number;
  expiringQuantity: string | number;
}

export interface MaterialManagementProps {
  width?: string | number;
  height?: string | number;
  tabs?: MaterialTab[];
  activeTabBackground?: string;
  inactiveTabBackground?: string;
  borderColor?: string;
  backgroundColor?: string;
  stats?: MaterialStat[];
  tableHeaders?: {
    name?: string;
    quantity?: string;
    expiring?: string;
  };
  records?: MaterialRecord[];
  activeTabTextColor?: string;
  inactiveTabTextColor?: string;
  headerTextColor?: string;
  recordTextColor?: string;
  statValueColor?: string;
  statLabelColor?: string;
  showGradientText?: boolean;
  gradientColors?: string[];
  tableRowBackground?: string;
  onTabClick?: (tab: MaterialTab, index: number) => void;
  onRecordClick?: (record: MaterialRecord, index: number) => void;
  theme?: 'light' | 'dark';
  style?: React.CSSProperties;
  className?: string;
  onClick?: () => void;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const MaterialManagement = forwardRef<HTMLDivElement, MaterialManagementProps>((props, ref) => {
  const {
    width = 460,
    height = 218,
    tabs = [
      { id: '1', text: '仓库1', isActive: true },
      { id: '2', text: '仓库2', isActive: false },
      { id: '3', text: '仓库3', isActive: false }
    ],
    activeTabBackground = 'http://localhost:8085/static/images/qixiangfangzhai/bz149bf.png',
    inactiveTabBackground = 'http://localhost:8085/static/images/qixiangfangzhai/jxbf2.png',
    borderColor = '#3A4E74',
    backgroundColor = 'rgba(5,18,34,0.2)',
    stats = [
      { label: '物资类别', value: '20', showGradient: true },
      { label: '物资总数', value: '30', unit: '万件', showGradient: true },
      { label: '近半年到期物资数量', value: '30', unit: '万件', showGradient: true }
    ],
    tableHeaders = {
      name: '物资名称',
      quantity: '数量',
      expiring: '近半年到期数量'
    },
    records = [
      { id: '1', name: '一次性防护口罩', quantity: '4450', expiringQuantity: '200' },
      { id: '2', name: '医用外科', quantity: '600', expiringQuantity: '0' }
    ],
    activeTabTextColor = '#FFFFFF',
    inactiveTabTextColor = 'rgba(255,255,255,0.9)',
    headerTextColor = '#56A5FF',
    recordTextColor = 'rgba(255,255,255,0.9)',
    statValueColor = '#1AD7FF',
    statLabelColor = '#FFFFFF',
    showGradientText = true,
    gradientColors = ['#FFFFFF', '#81C6FF'],
    tableRowBackground = 'rgba(16,85,163,0.18)',
    onTabClick,
    onRecordClick,
    theme = 'dark',
    style = {},
    className = '',
    onClick,
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const componentStyle: React.CSSProperties = {
    width: typeof width === 'number' ? `${width}px` : width,
    height: typeof height === 'number' ? `${height}px` : height,
    '--gradient-start': gradientColors[0] || '#FFFFFF',
    '--gradient-end': gradientColors[1] || '#81C6FF',
    '--border-color': borderColor,
    '--inactive-background': backgroundColor,
    '--table-row-background': tableRowBackground,
    ...style
  } as React.CSSProperties;
  const [activeTabIndex, setActiveTabIndex] = useState(0);
  const handleTabClick = (tab: MaterialTab, index: number) => {
    setActiveTabIndex(index)
    if (onTabClick) {
      onTabClick(tab, index);
    }
  };

  const handleRecordClick = (record: MaterialRecord, index: number) => {
    if (onRecordClick) {
      onRecordClick(record, index);
    }
  };

  const materialManagementClassName = ['material-management', theme, className].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={materialManagementClassName}
      style={componentStyle}
      onClick={onClick}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      <div className="tab-selector">
        {tabs.map((tab, index) => (
          <div
            key={tab.id}
            className={`tab-item ${activeTabIndex === index ? 'isActive' : 'unActive'}`}
            onClick={() => handleTabClick(tab, index)}
          >
            {tab.text}
          </div>
        ))}
      </div>

      {/* 统计数据区域 */}
      <div className="stats-area">
        {stats.map((stat, index) => (
          <div key={index} className="stat-item">
            <div
              className="stat-label"
              style={{ color: statLabelColor }}
            >
              {stat.label}
            </div>
            <div className="stat-value-container">
              <span
                className={`stat-value ${stat.showGradient && showGradientText ? 'gradient-text' : ''}`}
                style={{
                  color: !stat.showGradient || !showGradientText ? statValueColor : undefined
                }}
              >
                {stat.value}
              </span>
              {stat.unit && (
                <span
                  className="stat-unit"
                  style={{ color: statLabelColor }}
                >
                  {stat.unit}
                </span>
              )}
            </div>
          </div>
        ))}
      </div>

      {/* 表格区域 */}
      <div className="table-area">
        {/* 表头 */}
        <div className="table-header" style={{backgroundImage:`url(http://localhost:8085/static/images/qixiangfangzhai/bz54.png)`}}>
          <div
            className="header-cell"
            style={{ color: headerTextColor }}
          >
            {tableHeaders.name}
          </div>
          <div
            className="header-cell"
            style={{ color: headerTextColor }}
          >
            {tableHeaders.quantity}
          </div>
          <div
            className="header-cell"
            style={{ color: headerTextColor }}
          >
            {tableHeaders.expiring}
          </div>
        </div>

        {/* 表格数据 */}
        <div className="table-body">
          {records.map((record, index) => (
            <div
              key={record.id}
              className="table-row"
              onClick={() => handleRecordClick(record, index)}
            >
              <div
                className="table-cell"
                style={{ color: recordTextColor }}
              >
                {record.name}
              </div>
              <div
                className="table-cell"
                style={{ color: recordTextColor }}
              >
                {record.quantity}
              </div>
              <div
                className="table-cell"
                style={{ color: recordTextColor }}
              >
                {record.expiringQuantity}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
});

MaterialManagement.displayName = 'MaterialManagement';

export default MaterialManagement;
